<script setup lang="ts">
  import { addArchiveAPI, getArchiveDetailAPI, updateArchiveAPI } from '@/api'
  import type { PatientForm } from '@/types/archive'
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const formRef = ref() // 声明ref绑定对象
  // 声明响应式对象
  const addForm = ref<PatientForm>({
    name: '',
    defaultFlag: 0,
    idCard: '',
    gender: 1,
  })
  // 声明对象
  const rules = {
    name: {
      rules: [
        {
          required: true,
          errorMessage: '患者姓名不能为空',
        },
        {
          pattern: /^[\u4e00-\u9fa5]{2,5}$/,
          errorMessage: '患者姓名为2-5的中文',
        },
      ],
    },
    idCard: {
      rules: [
        {
          required: true,
          errorMessage: '身份证不能为空',
        },
        {
          pattern:
            /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
          errorMessage: '身份证号格式不正确',
        },
      ],
    },
    gender: {
      rules: [
        { required: true, errorMessage: '请勾选患者性别' },
        {
          // 自定义校验规则
          validateFunction: (rule, value, data, callback) => {
            // 判断身份证第 17 位(索引为16)是否与选择的性别一致
            if (Number(addForm.value.idCard.charAt(16)) % 2 !== value) {
              // callback 处理提示错误信息
              callback('选择的性别与身份号中性别不一致')
            }
            // 验证通过返回 true
            return true
          },
        },
      ],
    },
  }
  onLoad((options) => {
    if (options?.id) {
      getArchiveDetail(options?.id)
      uni.setNavigationBarTitle({
        title: '编辑患者',
      })
    }
  })
  // 获取详情
  const getArchiveDetail = async (id: string) => {
    addForm.value = await getArchiveDetailAPI(id)
  }
  const onSwitchChange = () => {
    addForm.value.defaultFlag = Math.abs(addForm.value.defaultFlag - 1)
  }
  // 保存
  const btnSave = async () => {
    await formRef.value.validate()
    let mess = '添加'
    if (addForm.value.id) {
      // 编辑模式
      await updateArchiveAPI({ ...addForm.value, age: undefined, genderValue: undefined })
      mess = '编辑'
    } else {
      // 新增模式
      await addArchiveAPI(addForm.value)
    }

    uni.showToast({
      title: mess + '成功',
    })
    uni.navigateBack() // 返回上一个页面
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms :rules="rules" ref="formRef" :model="addForm" border label-width="220rpx">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            style="color: #121826"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
            v-model="addForm.name"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            style="color: #121826"
            :input-border="false"
            :clearable="false"
            v-model="addForm.idCard"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            selectedColor="#16C2A3"
            v-model="addForm.gender"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch
              @change="onSwitchChange"
              :checked="addForm.defaultFlag === 1"
              color="#20c6b2"
              style="transform: scale(0.7)"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="btnSave">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
